<!-- 张沐泉 著 2021.4 -->
<!-- 本体 -->
<template>
	<div class="bodys" id='wrap' ref="Scroll">
		<!-- 内容 -->
		<div class="content" v-if="!isok">
			<!-- 业务流程进程 -->
			<div class="flow">
				<span class="flowTitle">
					<span class="flowimg"></span>
					<span class="flowname">业务流程进展</span>
				</span>
				<HintTitle :list='list' :listChanges='listChanges'></HintTitle>

			</div>

			<!-- 文字逐渐显示插件 -->
			<div class="flow">
				<span class="flowTitle">
					<span class="flowimg"></span>
					<span class="flowname">文字缓缓展示</span>
				</span>
				<Article :text='text' :time='time'></Article>
			</div>

			<!-- 四季对比图插件 -->
			<div class="flow">
				<span class="flowTitle">
					<span class="flowimg"></span>
					<span class="flowname">四季对比图</span>
				</span>
				<Seasons :cake='cake'></Seasons>
			</div>
			<!-- 四季对比图插件 -->

			<div class="flow">
				<span class="flowTitle">
					<span class="flowimg"></span>
					<span class="flowname">树形结构</span>
				</span>
				<Tree :data = 'treedata'></Tree>
			</div>
			<!-- 横竖屏 -->
			<div class="flow">
				<span class="flowTitle">
					<span class="flowimg"></span>
					<span class="flowname">横竖屏旋转</span>
				</span>
			</div>
		</div>
		<RotateIphone @rotate='rotate'></RotateIphone>
		<!-- <button @click="next()">下一页</button> -->
	</div>
</template>

<script>
	import HintTitle from '../components/main.vue'
	import Article from '../components/article.vue'
	import Seasons from '../components/seasons.vue'
	import RotateIphone from '../components/RotateIphone.vue'
	import Tree from '../components/Tree.vue'
	export default {
		data() {
			return {
				// 业务流程进展模块数据
				list: [{
						'name': '安全策划',
						'number': 2
					},
					{
						'name': '安全策划',
						'number': 3
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 5
					},
					{
						'name': '安全策划',
						'number': 6
					}
				],
				listChanges: 0, //判断list数据变化，用于子页面监听

				// 文字展示字段
				// 文字内容
				text: '<div>登高</div> <p>作者：杜甫</p> <p>风急天高猿啸哀，渚清沙白鸟飞回。<p/><p>无边落木萧萧下，不尽长江滚滚来。<p/><p>万里悲秋常作客，百年多病独登台。<p/><p>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>',
				time: 200, //文字出现时间
				// 四季对比图数据
				cake: [

					{
						value: 21,
						itemStyle: {
							color: '#25E2CB',
							name: '第一季度'
						}
					},
					{
						value: 10,
						itemStyle: {
							color: '#FBE111',
							name: '第二季度'
						}
					},
					{
						value: 45,
						itemStyle: {
							color: '#3EA0FD',
							name: '第三季度'
						}
					},
					{
						value: 34,
						itemStyle: {
							color: '#FE8A5E',
							name: '第四季度'
						}
					}
				],
				isok: false,
				scrollTop: 0,
				scrollNum: 0,
				treedata:{
					id: 0,
					label: "XXX科技有限公司",
					children: [{
							id: 2,
							label: "科技有限公司科技有限公司科技有限公司科技有限公司",
							children: [{
									id: 5,
									label: "研发-前端",
									swtich: "myred",
									children: [{
										id: 11,
										label: "前端",
									}]
								},
								{
									id: 6,
									label: "研发-后端",
									swtich: "myger"
								},
								{
									id: 9,
									label: "UI设计",
									swtich: 111
								},
								{
									id: 10,
									label: "产品经理"
								}
							]
						},
						{
							id: 3,
							label: "销售部",
							children: [{
									id: 7,
									label: "销售一部",
									swtich: "myblue"
								},
								{
									id: 8,
									label: "销售二部",
									swtich: false
								}
							]
						},
						{
							id: 4,
							label: "财务部"
						},
						{
							id: 9,
							label: "HR人事"
						},
						{
							id: 13,
							label: "招生部"
						},
						{
							id: 14,
							label: "策划部"
						}
					]
				},
			}
		},
		created() {},
		methods: {
			rotate(val) {
				if (val) {
					this.scrollNum = this.scrollTop;
				}
				this.isok = val;
				this.$nextTick(() => {
					this.$refs.Scroll.scrollTop = this.scrollNum;
				})

			},
			next() {
				this.$router.push('/new')
			}

		},
		mounted() {
			document.querySelector("#wrap").addEventListener('scroll', () => {
				this.scrollTop = document.querySelector("#wrap").scrollTop;
			}, true)
		},
		components: {
			HintTitle,
			Article,
			Seasons,
			RotateIphone,
			Tree
		},
		watch: {

		}
	}
</script>

<style scoped="scoped" lang="less">
	@import "./index.less";
	* {
		margin: 0;
		padding: 0;
	}

	.month_contents {
		background-color: #FFEBAD;
		padding-bottom: 1rem;
	}
</style>
